<template>
	<div class='h-full flex justify-center items-center'>
    <div id='mapDom' class='h-full w-full' style="width:100%;height:600px;background: white;">
    </div>
  </div>
</template>

<script setup lang="ts" name="basecharts">
import { onMounted,reactive } from 'vue'
import * as echarts from 'echarts'
import '../assets/json/china.js'
import axios from 'axios';
import { getCityPositionByName } from '../assets/cityPostion.js'

// 模拟10条数据
// let mockDatada = [
//   { name: '北京', value: 1 },
//   { name: '天津', value: 2 },
//   { name: '河南', value: 3 },
//   { name: '广西', value: 3 },
//   { name: '广东', value: 3 },
//   { name: '河北', value: 3 },
// ]

// let mockData = reactive([])
onMounted(() => {
  axios.get('http://127.0.0.1:5000/map')
    .then((res) => {
      const mockData = res.data.data;
      console.log(mockData); // Ensure mockData is populated here

      let data = mockData.map(i => {
        let cityPosition = getCityPositionByName(i.name);
        return {
          name: i.name,
          value: i.value,
        };
      });

      const maxValue = mockData.reduce((max, current) => {
        return max < current.value ? current.value : max;
      }, mockData[0].value);

      console.log("最大值为:", maxValue);

      let initMap = echarts.init(document.querySelector('#mapDom'));
      initMap.setOption({
        backgroundColor: 'transparent',
        tooltip: {
          show: false,
        },
        geo: {
          map: 'china',
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          select: {
            disabled: true,
          },
          emphasis: {
            disabled: true,
            areaColor: '#00F1FF',
          },
          top: '10%',
          left: 'center',
          z: 1,
        },
        title: {
          text: '咖啡销售地区分布图',
          left: 'center',
          top: '20px',
        },
        visualMap: {
          min: 1,
          max: maxValue,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orange'], // Fixed syntax error here
          },
        },
        series: [{
            type: 'map',
            map: 'china',
            zoom: 1,
            tooltip: {
              show: false,
            },
            label: {
              show: true,
              color: '#ffffff',
              align: 'center',
            },
            top: '10%',
            left: 'center',
            aspectScale: 0.75,
            roam: false,
            itemStyle: {
              borderColor: '#ccc',
              borderWidth: 1,
              opacity: 1,
            },
            select: {
              disabled: true,
            },
            emphasis: {
              disabled: false,
              data: data,
              label: {
                align: 'center',
                color: '#ffffff',
              },
              itemStyle: {
                color: '#ffffff',
                areaColor: '#0075f4',
              },
            },
            z: 2,
            data: data,
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: [50, 50],
            label: {
              show: true,
              color: '#fff',
              formatter(value) {
                return value.data.value[2];
              },
            },
            itemStyle: {
              color: '#e30707',
            },
            z: 2,
          },
        ],
      });
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
});

</script>

<style scoped>
.schart-box {
	display: inline-block;
	margin: 20px;
}
.schart {
	width: 600px;
	height: 400px;
}
.content-title {
	clear: both;
	font-weight: 400;
	line-height: 50px;
	margin: 10px 0;
	font-size: 22px;
	color: #1f2f3d;
}
</style>